<template>
    <div id="panel1">

        <div class="box">
            <p>开始漫游</p>
            <label class="switch">
                <input type="checkbox" id="mySwitch" v-model="roamChecked" @click="toggleSwitch">
                <span class="slider"></span>
            </label>
        </div>

    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { getobjm } from '../scripts/getobjm'

const roamChecked = ref(false)
const objm = getobjm()


const sceneObject = getOrCreateGeoLine('geoline1')


function getOrCreateGeoLine(id: string) {
    const geoLine = objm.getSceneObject(id)
    if (!geoLine && geoLine != undefined) return geoLine
    return objm.createSceneObjectFromJson({
        "id": "geoline1",
        "type": "ESGeoLineString",
        "name": "ESGeoLineString_9dc8",
        "allowPicking": true,
        "strokeStyle": {
            "width": 0,
            "widthType": "screen",
            "color": [
                1,
                1,
                1,
                1
            ],
            "material": "",
            "materialParams": {}
        },
        "points": [
            [106.7841698, 31.8876644, 558],
            [
                106.784983, 31.88700, 558
            ],
            [
                106.785355, 31.887383, 558
            ],
            [
                106.7845461, 31.8879279, 558
            ],
            [106.7841698, 31.8876644, 558],
        ]
    })
}


function toggleSwitch() {
    if (!roamChecked.value) {
        roamChecked.value = true
        console.log("Switch已打开");

        // 执行打开状态下的操作
        //    参数(折线id，运动速度，抬高高度，是否循环)
        objm.activeViewer.changeToLine('geoline1', 4, 1, false)

    } else {
        roamChecked.value = false
        console.log("Switch已关闭");
        // 执行关闭状态下的操作
        objm.activeViewer.changeToMap()
    }
}

</script>

<style scoped>
#panel1 {
    position: absolute;
    box-sizing: border-box;
    left: 10px;
    top: 70px;
    width: 200px;
    height: 10%;
    background: #153651;
    border-radius: 8px;
    padding: 20px;
    color: #d6deea;
    border: 1px solid #939e8f;
    animation-name: enter;
    animation-duration: 0.1s;
    animation-fill-mode: forwards;
    animation-delay: 0.3s;
    box-shadow: 5px 5px 10px #181616
}

.box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 10px;
    grid-row-gap: 5px;
    align-items: center;
}

.switch {
    position: relative;
    display: inline-block;
    width: 48px;
    height: 25px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 7px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.slider {
    background-color: #2196F3;
}

input:checked+.slider:before {
    transform: translateX(14px);
}
</style>
